<template>
  <div class="section">
    <div class="content" v-if="pageType == 0">
      <div class="title">Please fill in your needs and information</div>
      <div class="des">
        After submission, our representative will get in touch with you.
      </div>
      <div class="form">
        <div class="box">
          <el-form
            :label-position="labelPosition"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="How many EV chargers do you need?"
              prop="region"
            >
              <el-select
                v-model="ruleForm.region"
                placeholder="Please select"
                style="width: 100%"
              >
                <el-option label="EV一" value="shanghai"></el-option>
                <el-option label="EV二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Region" prop="region">
              <el-select
                v-model="ruleForm.region"
                placeholder="Please select"
                style="width: 100%"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Name" prop="name">
              <el-row :gutter="20">
                <el-col :span="12"
                  ><el-input
                    v-model="ruleForm.First"
                    placeholder="First Name"
                  ></el-input
                ></el-col>
                <el-col :span="12"
                  ><el-input
                    v-model="ruleForm.Last"
                    placeholder="Last Name"
                  ></el-input
                ></el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="Email" required>
              <el-input
                v-model="ruleForm.Email"
                placeholder="e.g.name@example.com"
              ></el-input>
            </el-form-item>
            <el-form-item label="Phone Number">
              <el-input
                v-model="ruleForm.Phone"
                placeholder="e.g.+49 XXXXXXXXXX"
              ></el-input>
            </el-form-item>
            <el-form-item label="Message">
              <el-input type="textarea" v-model="ruleForm.Message"></el-input>
            </el-form-item>
            <div class="checkbox">
              <el-checkbox v-model="checked"></el-checkbox>
              <div class="text">
                Subscribe to stay informed on the latest industry news, product
                updates, and events! By submitting this request, I give consent
                for Pingalax or its authorized distributors to contact me. Read
                our <span @click="pageType = 1">Privacy Policy</span> to learn
                how we ensure the security of your data.
              </div>
            </div>
            <div class="submit" @click="submitForm('ruleForm')">Submit</div>
            <!-- <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item> -->
          </el-form>
        </div>
      </div>
    </div>
    <div class="content" v-else>
      <div class="back" @click="backClick()">
        <img :src="back" style="width: 18px; height: 16px;margin-right: 5px;" alt="" />Return
      </div>
      <div class="textarea">
        <div class="text_title">Privacy Policy</div>
        <div class="descraption">
          <div class="list">
            <div class="name">Privacy Policy</div>
            <div class="text">
              At Chargeplex Inc. and its affiliates and subsidiaries, we are
              committed to protecting the privacy and security of our customers
              and website visitors. This Privacy Policy describes how we
              collect, use, and disclose personal information in connection with
              our products and services.
            </div>
          </div>
          <div class="list">
            <div class="name">Collection of Personal Information</div>
            <div class="text">
              The personal information we collect may include names, company
              names, contact information such as email addresses and phone
              numbers, and other information provided by customers on forms or
              through other means. We may also collect information about the
              devices our customers use to access our websites.
            </div>
          </div>
          <div class="list">
            <div class="name">Use of Personal Information</div>
            <div class="text">
              We collect personal information from our customers and visitors to
              our websites in order to provide them with information about our
              products, services, and events, to fulfill their sample and
              purchase requests, and to improve our products and services. We
              may also use this information for our own marketing purposes, such
              as sending promotional emails. We will not share our customers'
              personal information with third parties for their own marketing
              purposes without their explicit consent.
            </div>
          </div>
          <div class="list">
            <div class="name">Cross Border Data Transfers</div>
            <div class="text">
              As we run our business globally, the personal information we
              collect may be transferred to and processed in countries outside
              of the country where it was originally collected. These countries
              may not have the same data protection laws as the country in which
              the personal information was originally collected. However, we
              will ensure that any such transfers comply with applicable data
              protection laws and regulations.
            </div>
          </div>
          <div class="list">
            <div class="name">Applicable Laws and Regulations</div>
            <div class="text">
              While there may not be specific laws and regulations governing our
              collection, use, and disclosure of personal information in certain
              jurisdictions, we are committed to complying with applicable laws
              and regulations, including the General Data Protection Regulation
              (GDPR) for customers located in the European Union.
            </div>
          </div>
          <div class="list">
            <div class="name">User Rights and Choices</div>
            <div class="text">
              Our customers have the right to access, correct, and delete their
              personal information, as well as to object to or restrict the
              processing of their personal information. Customers can exercise
              these rights by contacting us at support@admin@chargeplex.net . We
              will respond to these requests in accordance with applicable data
              protection laws and regulations.
            </div>
          </div>
          <div class="list">
            <div class="name">Changes to this Privacy Policy</div>
            <div class="text">
              We may update this Privacy Policy from time to time to reflect
              changes in our business practices or legal requirements. If we
              make material changes to this Privacy Policy, we will notify our
              customers and visitors to our websites by posting a prominent
              notice on our websites or by sending an email to our customers'
              registered email addresses.
            </div>
          </div>
          <div class="list">
            <div class="name">Contact Us</div>
            <div class="text">
              If you have any questions or concerns about this Privacy Policy or
              our privacy practices, please contact us at :admin@chargeplex.net
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import back from "@/assets/images/site/back.png";
export default {
  data() {
    return {
      pageType: 0,
      back: back,
      isChecked: false,
      dialogVisible: false,
      checked: false,
      labelPosition: "top",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        desc: "",
        First: "",
        Last: "",
        Email: "",
        Phone: "",
        Message: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  created() {},
  methods: {
    backClick(){
      this.pageType = 0
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCheckboxChange(value) {
      console.log(`Checkbox changed to: ${value}`);
      // 这里可以执行其他逻辑
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.section {
  width: 100%;
  background: #f5f5f5;
  padding-top: 80px;
}
.content {
  width: 60%;
  margin: 0 auto;
  /* text-align: center; */
}
.back {
  display: flex;
  align-items: center;
  /* padding: 6px 0px; */
  justify-content: center;
  height: 40px;
  line-height: 40px;
  width: 120px;
  text-align: center;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  font-size: 14px;
  color: #3d3d3d;
  box-sizing: border-box;
  font-weight: 500;
  margin-bottom: 16px;
}
.back:hover{
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.textarea{
  background: #fff;
  padding: 34px 100px;
}
.textarea .text_title{
  width:100%;
  text-align: center;
  font-size: 48px;
  color: #000000;
  margin-bottom: 45px;
}
.descraption{

}
.title {
  color: #000000;
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}
.des {
  color: #000000;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 35px;
  width: 100%;
  text-align: center;
}
.form {
  background: #fff;
  width: 100%;
}
.box {
  width: 60%;
  margin: 0 auto;
  padding: 40px 0;
}
.checkbox {
  width: 100%;
  display: flex;
}

/deep/ .el-checkbox__label {
  white-space: normal; /* 换行 */
}
.checkbox .text span {
  color: #1890ff;
}
.checkbox .text {
  margin-left: 10px;
}
.submit {
  width: 140px;
  height: 42px;
  border-radius: 65px;
  background: #ff6c01;
  text-align: center;
  line-height: 42px;
  color: #ffffff;
  font-size: 18px;
  margin: 30px auto;
}
.dialog {
}
/* .descraption .title {
  color: #000000;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 45px;
} */
.descraption .list {
  margin-bottom: 30px;
}
.descraption .list .name {
  color: #3d3d3d;
  font-weight: 600;
  font-size: 18px;
}
.descraption .list .text {
  font-size: 14px;
  color: #3d3d3d;
  line-height: 20px;
}
</style>
